import { useMount, useRequest } from 'ahooks';

import ProTable from '@ant-design/pro-table';

import { findByRedisList, redisClear } from '@/services/sys/sys_redis';
import { DeleteOutlined } from '@ant-design/icons';
import { Button } from 'antd';

const cloneTbale = () => {
  const column = [
    {
      title: '编号',
      dataIndex: 'index',
      key: 'index',
      valueType: 'indexBorder',
    },
    {
      title: '参数键名',
      dataIndex: 'key',
      width: 'md',
    },
    {
      title: 'DB',
      dataIndex: 'db',
      width: 'md',
    },

    {
      title: ' 系统内置',
      dataIndex: 'size',

      width: 'md',
    },
  ];

  const {
    run: fetchByDataList,
    refresh,
    data: dataList,
    loading,
  } = useRequest(findByRedisList, {
    debounceWait: 100,
    manual: true,
  });

  useMount(async () => {
    fetchByDataList();
  });

  return (
    <div>
      <ProTable<API.Attribute>
        headerTitle={
          'IP:' +
          dataList?.data?.ip +
          ' Port:' +
          dataList?.data?.port +
          ' Count:' +
          dataList?.data?.count
        }
        search={false}
        onDataSourceChange={(d) => {
          console.log('onDataSourceChange', d);
        }}
        onLoad={(d) => {
          // 数据加载完操作
          console.log('onDataSourceChange', d);
        }}
        dataSource={dataList?.data?.list}
        loading={loading}
        columns={column}
        toolBarRender={() => [
          <Button
            onClick={() => {
              redisClear().then(() => {
                refresh();
              });
            }}
            key="button"
            icon={<DeleteOutlined />}
            type="primary"
            danger
          >
            全部清理
          </Button>,
        ]}
      ></ProTable>
    </div>
  );
};

export default cloneTbale;
